<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>彩票球数管理</title>
<%@include file="/WEB-INF/base.jspf"%>
<style>
   	.span-c-wanfaItem {
  		color:#337ab7;
  		border-radius:4px;
  		display:block;
  		padding:10px 15px;
  		cursor: pointer;
  	}
	.modal-dialog {
		max-width: 1000px;
	}  	
  	.span-c-wanfaItem:hover {
  		background-color: #eee;
  	}
  	.span-c-wanfaItem-active:hover {
  		background-color:#337ab7;
  		color:#fff;  		
  	}
  	.span-c-wanfaItem-active {
  		background-color:#337ab7;
  		color:#fff;
  	}
  	.div-c-tabBtns {
  		display:flex;
  		align-items:center;
  		flex-wrap:wrap;
  	}
  	.div-c-contentItem {
  		display:none;
  	}
  	.div-c-contentItem.active {
  		display:block;
  	}
table th,table tr,table td {
	text-align: center;
	vertical-align:middle;
}
</style>
	</head>
	<body>
		<div class="div-c-tabBtns">
			<span class="span-c-wanfaItem span-c-wanfaItem-active" data-index="1">PK拾</span>
			<span class="span-c-wanfaItem" data-index="2">时时彩</span>
			<span class="span-c-wanfaItem" data-index="3">11选5</span>
			<span class="span-c-wanfaItem" data-index="4">六合彩</span>
		</div>
		<div class="content-wrapper" style="padding-top:16px;">
			<div class="div-c-contentItem div-c-contentItem1 active">
			<p style="color:red;font-weight:bold;">该分类包含：北京pk拾,二分pk拾,幸运飞艇,幸运赛马</p>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>彩种</th>
							<th>玩法</th>
							<th>球数</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>PK拾</td>
							<td>1-10名</td>
							<td><input data-id="1" data-num="10" data-name="PK拾"  data-play="1-10名"  class="form-control" type="number" placeholder="1~10" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="div-c-contentItem div-c-contentItem2">
			<p style="color:red;font-weight:bold;">该分类包含：重庆时时彩,二分时时彩,天津时时彩,新疆时时彩</p>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>彩种</th>
							<th>玩法</th>
							<th>球数</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>时时彩</td>
							<td>1-5球</td>
							<td><input data-id="2"  data-num="10" data-name="时时彩"  data-play="1-5球"   class="form-control" type="number" placeholder="1~10" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
					</tbody>
				</table>
			</div>	
			<div class="div-c-contentItem div-c-contentItem3">
			<p style="color:red;font-weight:bold;">该分类包含：安徽11选5,广东11选5,江西11选5,山东11选5,上海11选5</p>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>彩种</th>
							<th>玩法</th>
							<th>球数</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>11选5</td>
							<td>1-5球</td>
							<td><input data-num="10" data-id="3" data-name="11选5"  data-play="1-5球" class="form-control" type="number" placeholder="1~10" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
					</tbody>
				</table>
			</div>	
			<div class="div-c-contentItem div-c-contentItem4">
			<p style="color:red;font-weight:bold;">该分类包含：香港六合彩,5分六合彩</p>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>彩种</th>
							<th>玩法</th>
							<th>球数</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>六合彩</td>
							<td>特码</td>
							<td><input data-num="49" data-id="11" data-name="六合彩"  data-play="特码" class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>					
						<tr>
							<td>六合彩</td>
							<td>5-8 不中</td>
							<td><input data-num="49" data-id="4" data-name="六合彩"  data-play="5-8不中" class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>9-10 不中</td>
							<td><input data-num="49" data-id="5" data-name="六合彩"  data-play="9-10不中" class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>11 不中</td>
							<td><input data-num="49" data-id="6" data-name="六合彩"  data-play="11不中" class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>12 不中</td>
							<td><input data-num="49" data-id="7" data-name="六合彩"  data-play="12不中" class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>13 不中</td>
							<td><input data-num="49" data-id="8" data-name="六合彩"  data-play="13不中"  class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>14 不中</td>
							<td><input data-num="49" data-id="9" data-name="六合彩"  data-play="14不中"  class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>
						<tr>
							<td>六合彩</td>
							<td>15 不中</td>
							<td><input data-num="49" data-id="10" data-name="六合彩"  data-play="15不中"  class="form-control" type="number" placeholder="1~49" /></td>
							<td><button class="btn btn-primary btn-save-btn">保存</button></td>
						</tr>																																				
					</tbody>
				</table>
			</div>								
		</div>
<!-- 提醒模态框（Modal） -->

<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   			
		
	<script src="/layui/layui.js"></script>
	<script>
	//findLotteryAttributeSetup
		var getAllCountInfo = function() {
			var urlPath = "/czgl/findLotteryAttributeSetup.do"
			var newRequest = {
				url: urlPath,
				type: "post",
				data: {},
				success: function(data) {
					var newData = JSON.parse(data) 
					for (var i = 0; i < newData.data.length; i++) {
						var item = newData.data[i]
						var itemId = item.id
						var $inputSelector = $("[data-id='" + itemId + "']")
						if ($inputSelector.length > 0) {
							$inputSelector.val(item.kongzhisl)
						}
					}
				},
				error: function(status) {
					console.log("status", status)
				}
			}
			ajax(newRequest)		
		}

		$(".div-c-tabBtns .span-c-wanfaItem").on("click", function(e) {
			$(e.currentTarget).addClass("span-c-wanfaItem-active").siblings().removeClass("span-c-wanfaItem-active")
			var index = $(e.currentTarget).attr("data-index")
			$(".div-c-contentItem.active").removeClass("active")
			$(".div-c-contentItem" + index).addClass("active")
		})
		// showNoticeModal("保存成功")
		$(".div-c-contentItem").on("click", ".btn-save-btn", function(e) {
			var $parent = $(e.target).parent()
			var input = $parent.prev().find("input")
			var numValue = input.val()
			if (input.val().trim() === "") {
				showNoticeModal("球数不得为空")
				return
			}
			var numR = /^[0-9]+$/
			if (!numR.test(numValue)) {
				showNoticeModal("球数必须为正整数")
				return					
			}			
			if (numValue < 1) {
				showNoticeModal("球数最小值为1")
				return				
			}
			var maxNum = input.attr("data-num")
			if (numValue > Number(maxNum)) {
				showNoticeModal("球数最大不得超过" + maxNum)
				return				
			}	
			ajax({
				url: "/czgl/updateLotteryAttributeSetup.do",
				type: "post",
				data: {
					id: input.attr("data-id"),
					count: input.val(),
					name: input.attr("data-name"),
					play: input.attr("data-play")
					},
				success: function(data) {
					var newData = JSON.parse(data) 
					showNoticeModal(newData.data)
					getAllCountInfo()
				},
				error: function(status) {
					console.log("status", status)
				}				
			})
		})
		
		getAllCountInfo()
	</script>
	</body>
</html>


